<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!--
        Customize this policy to fit your own app's needs. For more guidance, please refer to the docs:
            https://cordova.apache.org/docs/en/latest/
        Some notes:
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
<!--  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">
  <link rel="stylesheet" href="css/vant.css">
  <link rel="stylesheet" href="css/frontDetail.css">
  <title>详情</title>
</head>

<body>
<div id="app" class="app">
  <van-sticky>
    <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
  </van-sticky>
  <div class="main-box">
    <van-form @failed="onFailed" label-align="top">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field v-model="formData.caseTitle" label="标题：" name="pattern" placeholder=""
                 readonly></van-field>


      <van-field v-model="formData.relevancyName" label="关联信息：" name="type" placeholder=""
                 readonly></van-field>
      <!--            类型-->
      <van-field v-model="formData.typeName" name="type" label="类型：" placeholder=""
                 readonly></van-field>


      <!--            所属区域-->
      <van-field v-model="formData.areaName" name="type" label="所属区域：" placeholder=""
                 readonly></van-field>


      <!--            所属街道-->
      <van-field v-model="formData.streetName" name="type" label="所属街道：" placeholder=""
                 readonly></van-field>


      <van-field v-model="formData.location" label="位置描述：" name="type" placeholder=""
                 readonly></van-field>

      <!--            事件类型-->
      <van-field v-model="formData.eventTypeName" name="type" label="事件类型："
                 placeholder=""
                 readonly></van-field>

      <van-field v-model="formData.eventInfo" label="事件描述：" name="type" placeholder=""
                 readonly></van-field>


      <van-field v-model="formData.eventInfo" label="处理时限：" name="type" placeholder=""
                 readonly></van-field>
      <van-field name="switch" label="图片：">
        <template #input>
          <van-image
            v-if="formData.caseImg"
            :src="formData.caseImg"
            @click="previewImg(formData.caseImg)"
          ></van-image>
        </template>
      </van-field>


    </van-form>
  </div>
  <van-sticky offset-bottom="0" position="bottom">

    <div style="background: #fff; padding: 16px; display: flex; align-items: center;">
      <van-button round block type="warning" style="margin-right: 20px;" :disabled="+formData.completeFlag !== 4" @click="showLogOut = true;">
        注销
      </van-button>
      <van-button round block type="success" style="margin-right: 20px;" :disabled="+formData.completeFlag !== 4" @click="setDisposalComplete">
        处置完成
      </van-button>
      <van-button round block type="primary" :disabled="+formData.completeFlag !== 4" @click="setPigeonhole">
        归档
      </van-button>
    </div>
  </van-sticky>

  <!--  注销-->
  <van-popup title="注销" v-model:show="showLogOut" position="center" @close="logOutForm = {}" closeable>
    <div class="pop-title">注销</div>
    <van-form label-width="80" @submit="setLogOut">
      <van-field label="注销原因：" v-model="logOutForm.completeInfo" type="textarea" maxlength="500" placeholder="请输入"
                 :rules="[{ required: true, message: '请输入正确内容' }]">

      </van-field>
      <div class="submit-btn">
        <van-button type="primary" size="small" native-type="submit" block>注销</van-button>
      </div>
    </van-form>
  </van-popup>

</div>
<script src="./js/jquery/jquery.min.js"></script>
<script src="./js/vue3.js"></script>
<script src="./js/adApi.js"></script>
<script src="./js/vant.js"></script>
<script src="./js/frontDetail.js"></script>
</body>

</html>